<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="fragment_base::head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客-分类-列表</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/common.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="../../static/js/custom.js"></script>
    <script src="../../static/js/semantic.min.js"></script>
</head>
<body>
<!--导航-->
<nav th:replace="admin/fragment_manager::menu(1)">
    class="ui inverted attached segment head-tab-padding">
    <div class="ui container">
        <!--stackable 表示可堆叠，自适应-->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a class="active menu-item item mobile-hide" href="#"><i
                    class="teal code icon"></i>博客</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal idea icon"></i>分类</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal tags icon"></i>标签</a>
            <div class="right menu-item  mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img class="ui circular image"
                             src="http://xxstudy.cn/media/img/avatar_15.png"
                             style="vertical-align:middle">唐人
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--菜单按钮-->
    <a id="menu-toggle" class=" ui black icon button bar-position mobile-show" href="#">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--列表-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a class="item" th:href="@{/admin/category/create}">新增</a>
            <a class="item teal active" th:href="@{/admin/categorys}">列表</a>
        </div>
    </div>
</div>


<!--中间内容-->
<div class="center-padding">
    <div class="ui container">
        <!--操作提示-->
        <div class="ui message" th:unless="${msg==null}" th:classappend="${msg.success}?'success':'error'">
            <i class="close icon"></i>
            <div class="header">提示</div>
            <p th:text="${msg.msg}">操作成功</p>
        </div>


        <!--内容区域-->
        <table class="ui teal table">
            <!--标题-->
            <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <!--内容-->
            <tr th:each="category,list:${categoryPage.content}">
                <td th:text="${list.count}" data-label="">1</td>
                <td th:text="${category.categoryName}" data-label="">Python从入门到进阶</td>
                <td data-label="">
                    <a class="ui mini teal basic button" href="#"
                       th:href="@{/admin/category/{id}/create(id=${category.id})}">编辑</a>
                    <a class="ui mini red basic button" href="#"
                       th:href="@{/admin/category/delete/{categoryName}(categoryName=${category.categoryName})}">删除</a>
                </td>
            </tr>
            </tbody>

            <!--foot-->
            <tfoot class="full-width">
            <tr>
                <th colspan="3">
                    <div class="ui mini pagination menu" th:if="${categoryPage.totalPages}>1">
                        <a class="item" th:href="@{/admin/category(page=${categoryPage.number}-1)}"
                           th:unless="${categoryPage.first}">上一页</a>
                        <a class="item" th:href="@{/admin/category(page=${categoryPage.number}+1)}"
                           th:unless="${categoryPage.last}">下一页</a>
                    </div>
                    <a th:href="@{/admin/category/create}"
                       class="ui right floated mini teal labeled icon button"><i
                            class="add icon"></i>新增
                    </a>
                </th>
            </tr>
            </tfoot>
        </table>

    </div>
</div>

</body>
</html>